import React, { PureComponent } from 'react';
import { Modal, WhiteSpace } from 'antd-mobile';
import { config } from 'utils';
import Tag from './Tag';
import styles from './style.less';

class selectDbModal extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      bigScreen: [],
      homePageBashboard: null,
      menuList: [],
    };
  }
  componentDidMount() {
    // this.refreshList()
  }

  // componentWillReceiveProps(nextProps) {
  //   const { visible: nextVisible, allDashboard = [] } = nextProps;
  //   const { visible } = this.props;
  //   // 由隐藏到显示时 更新列表
  //   // !visible && nextVisible && this.refreshList(allDashboard);
  //   this.refreshList(allDashboard);
  // }

  componentDidUpdate(prevProps, prevState, snapshot) {}

  getSnapshotBeforeUpdate(prevProps, prevState) {
    const { visible: prevVisible } = prevProps;
    const { visible, allDashboard = [] } = this.props;
    // 由隐藏到显示时 更新列表
    visible && !prevVisible && this.refreshList(allDashboard);
    return null;
  }

  refreshList = arr => {
    // 首页、大屏 不可操作 要提出
    const { bigScreen, homePageBashboard, menuList } = arr.reduce(
      (obj, item) => {
        if (item.IsHomePageShow) {
          obj.homePageBashboard = item;
        } else if (config.bigScreenCategoryID.includes(item.Dashboard.CategoryID)) {
          obj.bigScreen.push(item);
        } else {
          obj.menuList.push(item);
        }
        return obj;
      },
      {
        bigScreen: [],
        menuList: [],
      }
    );
    this.setState({
      bigScreen,
      homePageBashboard,
      menuList,
    });
  };

  // 改变 选中
  setMenu = (DID, IsMenuShow) => {
    const { menuList } = this.state;
    return this.setState({
      menuList: menuList.map(e => (e.DID === DID ? { ...e, IsMenuShow } : e)),
    });
  };

  // 提交
  submitModify = async () => {
    const { allDashboard, dispatch } = this.props;
    const { menuList } = this.state;
    const modifyItems = menuList.filter(item =>
      allDashboard.find(e => e.DID === item.DID && e.IsMenuShow !== item.IsMenuShow)
    );
    dispatch({ type: 'home/changeDbList', payload: modifyItems });
  };
  render() {
    const { visible, onClose } = this.props;
    const { menuList, homePageBashboard, bigScreen } = this.state;
    const modalProps = {
      popup: true,
      visible,
      onClose,
      animationType: 'slide-up',
    };
    return (
      <Modal {...modalProps}>
        <div className={styles['modal-container']}>
          <WhiteSpace size="sm" />
          <div className={styles['modal-header']}>
            所有视图 <div className={styles.close} onClick={onClose} />
          </div>
          <WhiteSpace size="lg" />
          <div className={styles['sdb-card']}>
            <div className={styles['card-head']}>
              <span>常用视图</span>
              <a onClick={this.submitModify}> 确定</a>
            </div>
            <div className={styles['card-body']}>
              {homePageBashboard && <Tag text="首页" selected disabled />}
              {bigScreen.reduce((tags, item) => {
                const { Dashboard } = item;
                return [...tags, <Tag key={item.DID} text={Dashboard.Name} selected disabled />];
              }, [])}
              {menuList.reduce((tags, item) => {
                const { Dashboard } = item;
                return [
                  ...tags,
                  <Tag
                    key={item.DID}
                    value={item.DID}
                    onClick={DID => this.setMenu(DID, Number(item.IsMenuShow) === 1 ? 0 : 1)}
                    text={Dashboard.Name}
                    selected={item.IsMenuShow}
                  />,
                ];
              }, [])}
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}

export default selectDbModal;
